<template>
  <div>
    <button @click="flag = !flag" style="margin-bottom: 20px">切换</button>
    <transition name="fade">
      <div v-if="flag" class="box"></div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const flag = ref<boolean>(false);
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.fade-enter-from {
  width: 0;
  height: 0;
  background-color: #fff;
}

.fade-enter-active {
  transition: all 2.5s linear;
}

.fade-enter-to {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.fade-leave-from {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.fade-leave-active {
  transition: all 1s linear;
}

.fade-leave-to {
  width: 0;
  height: 0;
  background-color: #fff;
}
</style>
